<template>
  <div class="product-list">
    <div
        class="product-item"
        v-for="item in products"
        :key="item.id"
        @click="goToDetail(item.id)"
        style="margin-top: 15px"
    >
      <img :src="item.url" />
      <h3>{{ item.title }}</h3>
      <p>￥{{ item.saleCount }}</p>
    </div>
  </div>
</template>
<script >
import headerComponent from "../../components/public.vue"
export default {
  name: 'MedicineView',
  components:{
    headerComponent
  },
  data () {
    return {
      products: [{id: 1,title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/imgs/a.jpg", saleCount: 2342},
        {
          id:2,title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",
          price: 233,
          oldPrice: 598,
          url: "/imgs/b.jpg",
          saleCount: 2342
        },
        {id:3,
          title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季",
          price: 233,
          oldPrice: 598,
          url: "/imgs/c.jpg",
          saleCount: 2342
        },
        {id:4,
          title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚",
          price: 233,
          oldPrice: 598,
          url: "/imgs/d.jpg",
          saleCount: 2342
        },
        {id:5,
          title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花",
          price: 233,
          oldPrice: 598,
          url: "/imgs/e.jpg",
          saleCount: 2342
        },
        {id:6,
          title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领",
          price: 233,
          oldPrice: 598,
          url: "/imgs/f.jpg",
          saleCount: 2342
        },
        {id:7,
          title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",
          price: 233,
          oldPrice: 598,
          url: "/imgs/g.jpg",
          saleCount: 2342
        },
        {id:8,title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/imgs/h.jpg", saleCount: 2342},
        {id:9,
          title: "imone2021秋款黑色小西装外套女韩版学生宽松学",
          price: 233,
          oldPrice: 598,
          url: "/imgs/i.jpg",
          saleCount: 2342
        },
        {id:10,
          title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫",
          price: 233,
          oldPrice: 598,
          url: "/imgs/j.jpg",
          saleCount: 2342
        },
        {id:11,
          title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修",
          price: 233,
          oldPrice: 598,
          url: "/imgs/k.jpg",
          saleCount: 2342
        },
        {id:12,
          title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色",
          price: 233,
          oldPrice: 598,
          url: "/imgs/l.jpg",
          saleCount: 2342
        },
        {id: 13,title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/imgs/a.jpg", saleCount: 2342},
        {
          id:14,title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",
          price: 233,
          oldPrice: 598,
          url: "/imgs/b.jpg",
          saleCount: 2342
        },
        {id:15,
          title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季",
          price: 233,
          oldPrice: 598,
          url: "/imgs/c.jpg",
          saleCount: 2342
        },
        {id:16,
          title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚",
          price: 233,
          oldPrice: 598,
          url: "/imgs/d.jpg",
          saleCount: 2342
        },
        {id:17,
          title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花",
          price: 233,
          oldPrice: 598,
          url: "/imgs/e.jpg",
          saleCount: 2342
        },
        {id:18,
          title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领",
          price: 233,
          oldPrice: 598,
          url: "/imgs/f.jpg",
          saleCount: 2342
        },
        {id:19,
          title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",
          price: 233,
          oldPrice: 598,
          url: "/imgs/g.jpg",
          saleCount: 2342
        },
        {id:20,title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/imgs/h.jpg", saleCount: 2342},
        {id:21,
          title: "imone2021秋款黑色小西装外套女韩版学生宽松学",
          price: 233,
          oldPrice: 598,
          url: "/imgs/i.jpg",
          saleCount: 2342
        },
        {id:22,
          title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫",
          price: 233,
          oldPrice: 598,
          url: "/imgs/j.jpg",
          saleCount: 2342
        },
        {id:23,
          title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修",
          price: 233,
          oldPrice: 598,
          url: "/imgs/k.jpg",
          saleCount: 2342
        },
        {id:24,
          title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色",
          price: 233,
          oldPrice: 598,
          url: "/imgs/l.jpg",
          saleCount: 2342}]
    }
  },
  methods: {
    goToDetail (id) {
      this.$router.push(
          {
            path: 'information',
            query: {
              id: id
            }
          }
      );
    }
  }
}

</script>


<style scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.product-item {
  width: 200px;
  cursor: pointer;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.product-item:hover {
  transform: scale(1.05);
}

.product-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.product-item h3 {
  margin-top: 10px;
  font-size: 16px;
}

.product-item p {
  margin-top: 5px;
  color: #f00;
}
h3{
  white-space: nowrap;/*强制文本不换行*/
  overflow: hidden;/*溢出隐藏*/
  text-overflow: ellipsis;/*溢出文字替换为省略号
  */
}
*{
  margin: 0;
  padding: 0;
}
</style>